<script setup lang="tsx">
import { computed, ref } from 'vue'
import { ElCheckbox, ElMessage, ElRadio, ElRadioGroup } from 'element-plus'
import configApi from '@/api/modules/config'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

interface TableRow {
  deviceName: string
  unit: string
  powerOff: boolean
  powerOn: boolean
  powerLimit: boolean
  powerRecover: boolean
}

// 表头控制状态
const headerControls = ref<any>([])

const WxInfoText = ref('')

// 表格数据
const tableData = ref<TableRow[]>([
  {
    deviceName: '总表1',
    unit: '企业',
    powerOff: false,
    powerOn: false,
    powerLimit: false,
    powerRecover: false,
  },
  {
    deviceName: '电表2',
    unit: '生产车间',
    powerOff: false,
    powerOn: false,
    powerLimit: false,
    powerRecover: false,
  },
])

// 根据表头状态自动设置整列的值
function updateColumnValues(field: string, value: boolean) {
  tableData.value.forEach((row) => {
    row[field] = value
  })
}

// 定义表格列配置
const columns = computed(() => [
  { field: 'Name', align: 'center', title: '设备名称', minWidth: 200, showOverflow: true },
  { field: 'GroupName', align: 'center', title: '所属单元', minWidth: 200, showOverflow: true },
  ...headerControls.value.map((item: any) => {
    return {
      field: 'custom',
      title: 'title',
      width: 160,
      align: 'center',
      slots: {
        header: () => (
          <div class="header-wrapper">
            <div class="header-title text-center">{item.Name}</div>
            <div class="header-control">
              <ElRadioGroup v-model={item.IsAll} onChange={val => updateColumnValues(item.Name, val)}>
                <ElRadio label={true}>全部</ElRadio>
                <ElRadio label={false}>指定</ElRadio>
              </ElRadioGroup>
            </div>
          </div>
        ),
        default: ({ row }: any) => (
          <ElCheckbox
            v-model={row[item.Name]}
            disabled={item.IsAll}
          />
        ),
      },
    }
  }),
])

function getConfigData() {
  configApi.GetDeviceSubscription().then((res) => {
    const { Subscriptions, Devices, WxInfo } = res
    WxInfoText.value = WxInfo
    headerControls.value = Subscriptions as any[]
    tableData.value = Object.keys(Devices).map((key: string) => {
      const row: any = Devices[key]
      const checks: any = {}
      Subscriptions.forEach((msg: any) => {
        checks[msg.Name] = msg.ObjIDs.includes(key)
      })
      return {
        ...row,
        ...checks,
      }
    })
  })
}

function submitConfigData() {
  const submitData = headerControls.value.map((item: any) => {
    return {
      Name: item.Name,
      ObjIDs: tableData.value
        .filter((row: any) => row[item.Name])
        .map((row: any) => row.ObjID),
      IsAll: item.IsAll,
      MsgType: item.MsgType,
      Description: item.Description,
    }
  })
  configApi.SetDeviceSubscription({ subscriptions: submitData }).then(() => {
    ElMessage.success('保存成功')
  })
}

getConfigData()
</script>

<template>
  <PageMain>
    <el-descriptions
      class="mb-[20px]"
      title="账号信息"
      :column="3"
      border
    >
      <el-descriptions-item label="当前账号">
        {{ userStore.account }}
      </el-descriptions-item>
      <el-descriptions-item label="所属单位">
        {{ userStore.userInfo.AffiliatedObjName }}
      </el-descriptions-item>
      <el-descriptions-item label="微信">
        {{ WxInfoText }}
      </el-descriptions-item>
    </el-descriptions>

    <vxe-grid
      border
      :data="tableData"
      :columns="columns"
    />
    <div class="w-full flex justify-end p-[10px]">
      <el-button type="primary" @click="submitConfigData">
        保存
      </el-button>
    </div>
  </PageMain>
</template>

<style scoped>
.header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-weight: bold;
}

.header-control {
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>
